.matrixSelectContainer {
  display: table;
  width: 100%;
  font-size: 24px;

  .matrixRow {
    background-color: #fff;
    border-radius: 16px;
    padding: 20px 20px 30px 20px;
    margin-bottom: 30px;

    .matrixTitle {
      font-size: 30px;
      color: #000;
      padding-bottom: 20px;
      border-bottom: #ddd solid 2px;
    }

    .matrixOption{
      display: flex;
      flex-wrap: wrap;
    }

    .radioItem {
      margin: 30px 40px 0 0;
      color: #666;
      word-break: break-all;

      &::before {
        content: '　';
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 24px;
        margin-right: 10px;
        border-radius: 50%;
        border: #ccc solid 2px;
      }

      &.active {
        &::before {
          content: '✔';
          border-color: #f8df11;
          background-color: #f8df11;
        }
      }
      &.isMutual {
        color: #bbb;
        &::before {
          background-color: #eee;
          border-color: #ddd;
        }
      }
    }
  }
}
